import React, {useEffect, useRef, useState} from 'react'
import {createStyles} from "antd-style";
import SceneInit from "@/components/ThreeScene/SceneInit.ts";

const useStyle = createStyles(({css,token}) => {
    return {
        sceneContainer: css`
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            z-index: -10;
        `,
    }
})

const MainScene: React.FC = () => {
    const sceneContainer = useRef<HTMLDivElement>();
    const styles = useStyle().styles;
    // todo 换背景图
    const [imgLink, setImgLink] = useState('https://img.zcool.cn/community/01241455683b7e0000012b206b751a.jpg@3000w_1l_2o_100sh.jpg')

    useEffect(() => {
        const sceneInit = SceneInit(sceneContainer.current, imgLink);
        sceneInit.autoRotate(true)
        return sceneInit.dispose
    }, [imgLink]);

    return (
        <div className={styles.sceneContainer} ref={sceneContainer}></div>
    )
}

export default MainScene